<template>
    <section class="tabs">
        <el-tabs v-model="type" class="tab-pane common-table-tabs" @tab-click="changeTab">
            <el-tab-pane label="上刊进度" name="skProgress"> </el-tab-pane>
            <el-tab-pane label="拍照进度" name="photoProgress"> </el-tab-pane>
        </el-tabs>
        <!-- 名词注解 -->
        <div class="tips-box" @click="tipsShow = true">
            <span>指标名词注解</span>
            <img class="tips-icon" src="@/assets/icon_question@2x.png" />
        </div>
    </section>
    <section>
        <el-form ref="formRef" :model="formData" :inline="true" class="common-search-form">
            <el-form-item prop="weekNo">
                <el-select
                    v-model="formData.weekNo"
                    collapse-tags
                    placeholder="请选择周期"
                    class="select"
                    @change="getData()"
                >
                    <template #prefix>
                        <div class="label">选择周期</div>
                    </template>
                    <el-option v-for="(item, index) in list" :key="index" :label="item.weekShow" :value="item.weekNo" />
                </el-select>
            </el-form-item>
            <el-form-item prop="city">
                <el-select v-model="formData.city" collapse-tags placeholder="请选择城市" class="select">
                    <template #prefix>
                        <div class="label">城市</div>
                    </template>
                    <el-option
                        :label="`${userInfo.cityList[0].city}(${userInfo.groupName})`"
                        :value="userInfo.cityList[0].cityCode"
                    />
                </el-select>
            </el-form-item>
        </el-form>
    </section>
    <section v-if="type === 'skProgress'">
        <section class="data_list">
            <span class="tipTotal">汇总</span>
            <div>
                <p>{{ infoBatchProgress.pushTimes }}</p>
                <span>推送次数</span>
            </div>
            <div>
                <p>{{ infoBatchProgress.weekStatistics.needNum }}</p>
                <span>需上刊总数</span>
            </div>
            <div>
                <p>{{ infoBatchProgress.weekStatistics.networkedNum }}</p>
                <span>联网上刊</span>
            </div>
            <div>
                <p>{{ infoBatchProgress.weekStatistics.manualNum }}</p>
                <span>人工上刊</span>
            </div>
            <div class="wait-total" @click="showWaitNumDialogByWeek">
                <p>{{ infoBatchProgress.weekStatistics.waitNum }}</p>
                <span>未上刊</span>
            </div>
            <div>
                <p>{{ infoBatchProgress.weekStatistics.needlessNum }}</p>
                <span>无需上刊</span>
            </div>
            <div>
                <p>{{ infoBatchProgress.weekStatistics.progressPercent }}</p>
                <span>上刊进度</span>
            </div>
        </section>

        <XcTable id="xc-table" :loading="tableLoading" :data="listBatchProgress" :columns="tableBatchColumns">
            <template #waitNum="scope">
                <span class="wait-num" @click="showWaitNumDialogByBatch(scope.row)">{{ scope.row.waitNum }} </span>
            </template>
        </XcTable>
    </section>
    <section v-if="type === 'photoProgress'">
        <section class="data_list">
            <span class="tipTotal">汇总</span>
            <div>
                <p>{{ photoSummary.publishPhotoNum }}</p>
                <span>常规拍照推送</span>
            </div>
            <div>
                <p>{{ photoSummary.rephotoNum }}</p>
                <span>重拍拍照推送</span>
            </div>
            <div>
                <p>{{ photoSummary.needPhotoNum }}</p>
                <span>需拍照数</span>
            </div>
            <div>
                <p>{{ photoSummary.photoedNum }}</p>
                <span>已拍照数</span>
            </div>
            <div>
                <p>{{ photoSummary.undonePhotoNum }}</p>
                <span>未拍照数</span>
            </div>
            <div>
                <p>{{ photoSummary.noNeedPhotoNum }}</p>
                <span>无需拍照数</span>
            </div>
            <div>
                <p>{{ photoSummary.progressPercentage }}</p>
                <span>完成进度</span>
            </div>
        </section>
        <XcTable id="xc-table" :loading="tableLoading" :data="photoSummaryList" :columns="tablePhotoColumns"> </XcTable>
    </section>

    <!-- 名词注解弹窗 -->
    <el-dialog v-model="tipsShow" title="指标名词注解" width="60%">
        <XcTable id="xc-table" :data="type === 'skProgress' ? tipsList : tipsPhotoList" :columns="tipsColumns">
            <template #index="scope">{{ scope.$index + 1 }} </template>
        </XcTable>

        <Pagination
            :page-no="formData.pageNum"
            :page-size="formData.pageSize"
            :total="formData.total"
            @changePage="changePage"
            @changePageSize="changePageSize"
        ></Pagination>
    </el-dialog>

    <!-- 未上刊明细弹窗 -->

    <div class="wait-num-dialog">
        <el-dialog v-model="waiNumShow" title="未上刊明细" width="1150px" class="wait-num-dialog" @close="onWaitClose">
            <!-- //todo -->
            <!-- <el-row type="flex" justify="start">
                <el-col :span="2"> <span>汇总:</span></el-col>
                <el-col :span="8">
                    <el-row type="flex" justify="start">
                        <el-col :span="8">
                            <span class="point-red"> xxx </span>
                            <span>个点位</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="point-red"> xxx </span>
                            <span>个楼盘</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="point-red"> xxx </span>
                            <span>条路线</span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row> -->

            <XcTable id="xc-table" :data="waitData" :columns="waitNumColumns">
                <template #index="scope">{{ scope.$index + 1 }} </template>
            </XcTable>

            <!-- // todo waitNumformData 请求后端初始化 -->
            <div class="export-btn">
                <Pagination
                    :page-no="waitNumformData.pageNum"
                    :page-size="waitNumformData.pageSize"
                    :total="waitNumformData.total"
                    :page-sizes="[5, 10, 15]"
                    @changePage="waitNumChangePage"
                    @changePageSize="waitNumchangePageSize"
                ></Pagination>
                <el-button type="primary" @click="downloadDetail"> 导出明细 </el-button>
            </div>
        </el-dialog>
    </div>
    <Pagination
        :page-no="formData.pageNum"
        :page-size="formData.pageSize"
        :total="formData.total"
        @changePage="changePage"
        @changePageSize="changePageSize"
    ></Pagination>
</template>

<script setup lang="ts">
import { computed, reactive, ref, onMounted } from 'vue';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/XcTable.vue';
import Pagination from '@/components/common/Pagination.vue';
import type { TabsPaneContext } from 'element-plus';
import { tipsList, tipsPhotoList } from '@/utils/config.ts';
import {
    listPagePublishingWeek,
    getWeekProgress,
    listPageBatchProgress,
    getPhotoSummary,
    getPhotoSummaryList,
    weekWaitSkDetail,
    batchWaitSkDetail,
    weekWaitSkDetailExport,
    batchWaitSkDetailExport,
} from '@/api/taskProgress';
import { useStore } from 'vuex';
import { exportFormBlob, downloadFile, downLoadCommon } from '@/utils/common.ts';

const store = useStore();
const userInfo = computed(() => store.state.userGroup.userInfo);
const formData = reactive({
    weekNo: '',
    city: userInfo.value.cityList[0].cityCode,
    supplier: userInfo.value.groupCode,
    // city: '220100',
    // supplier: 'a0075',
    pageNum: 1,
    pageSize: 10,
    total: 0,
});
const waitNumformData = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 5,
});
const type = ref('skProgress');
const list = ref([]);
const tableLoading = ref(false);
const listBatchProgress = ref([]);
const infoBatchProgress = ref({ pushTimes: '', weekStatistics: {} });
const photoSummary = ref({});
const photoSummaryList = ref([]);
const tipsShow = ref(false);
const waiNumShow = ref(false); // 未上刊明细

import { ElMessage } from 'element-plus';

const tipsColumns = [
    { label: '序号', key: 'index', render: true, prop: { minWidth: '80' } },
    { label: '名称', key: 'name', prop: { minWidth: '150' } },
    { label: '名称解释', key: 'content', prop: { minWidth: '300' } },
];

const waitNumColumns = [
    { label: '点位编码', key: 'pointCode', prop: { minWidth: '150' } },
    { label: '楼盘名称', key: 'premisesName', prop: { minWidth: '100' } },
    { label: '路线', key: 'routeName', prop: { minWidth: '100' } },
    { label: '推送ID', key: 'batchId', prop: { minWidth: '150' } },
    { label: '推送时间', key: 'pushTime', prop: { minWidth: '160' } },
];
const tableBatchColumns = [
    { label: '推送时间', key: 'pushTime', prop: { minWidth: '220', fixed: 'left' } },
    { label: '推送ID', key: 'batchId', prop: { minWidth: '220', fixed: 'left' } },
    { label: '上刊进度', key: 'progressPercent', prop: { minWidth: '150' } },
    { label: '需上刊总数', key: 'needNum', prop: { minWidth: '150' } },
    { label: '联网上刊', key: 'networkedNum', prop: { minWidth: '150' } },
    { label: '人工上刊', key: 'manualNum', prop: { minWidth: '150' } },
    { label: '未上刊', key: 'waitNum', render: true, prop: { minWidth: '150' } },
    { label: '无需上刊', key: 'needlessNum', prop: { minWidth: '150' } },
    { label: '城市', key: 'citySupplier', prop: { minWidth: '300' } },
];
const tablePhotoColumns = [
    { label: '推送时间', key: 'createTime', prop: { minWidth: '220', fixed: 'left' } },
    { label: '推送ID', key: 'pushId', prop: { minWidth: '220', fixed: 'left' } },
    { label: '完成进度', key: 'progressPercentage', prop: { minWidth: '150' } },
    { label: '拍照类型', key: 'pushType', prop: { minWidth: '150' } },
    { label: '需拍照数', key: 'needPhotoNum', prop: { minWidth: '150' } },
    { label: '已拍照数', key: 'photoedNum', prop: { minWidth: '150' } },
    { label: '未拍照数', key: 'undonePhotoNum', prop: { minWidth: '150' } },
    { label: '无需拍照数', key: 'noNeedPhotoNum', prop: { minWidth: '150' } },
    { label: '城市', key: 'city', prop: { minWidth: '300' } },
];
onMounted(async () => {
    const { data } = await listPagePublishingWeek({ pageNum: 1, pageSize: 100 });
    list.value = data;
    formData.weekNo = data[0].weekNo;
    getData();
});

const changeTab = async (tab: TabsPaneContext, event: Event) => {
    formData.pageNum = 1;
    formData.pageSize = 10;
    type.value = tab.props.name;
    getData();
};
const getData = async () => {
    tableLoading.value = true;
    if (!formData.weekNo) {
        ElMessage.error('请选择周期号');
        return false;
    }
    try {
        if (type.value === 'skProgress') {
            try {
                const { data, total } = await listPageBatchProgress(formData);
                listBatchProgress.value = data.map((item: object) => {
                    return { ...item, ...item.batchStatistics };
                });
                formData.total = total;
                infoBatchProgress.value = await getWeekProgress(formData);
            } catch {
                listBatchProgress.value = [];
                formData.total = 0;
                infoBatchProgress.value = { pushTimes: '', weekStatistics: {} };
            }
        } else {
            try {
                const { data, total } = await getPhotoSummaryList(formData);
                photoSummaryList.value = data;
                console.log(photoSummaryList.value);
                formData.total = total;
                photoSummary.value = await getPhotoSummary(formData);
            } catch {
                photoSummaryList.value = [];
                formData.total = 0;
                photoSummary.value = {};
            }
        }
    } finally {
        tableLoading.value = false;
    }
};
const changePage = (val) => {
    formData.pageNum = val;
    getData();
};
const changePageSize = (val) => {
    formData.pageSize = val;
    getData();
};

class WaitInfo {
    constructor(
        i: number,
        public pointCode = 'pointCode' + i,
        public premisesName = 'premisesName' + i,
        public routeName = 'routeName' + i,
        public batchId = 'batchId' + i,
        public pushTime = 'pushTime' + i
    ) {}
}
const waitData = ref<WaitInfo[]>([]);
let curRowInfo: any = null;
let curWaiType: 'batch' | 'week' = 'batch';
const onWaitClose = () => {
    waitNumformData.pageNum = 1;
    waitNumformData.pageSize = 5;
};
const getWaiData = async (row: any) => {
    console.log('row', row);
    let result = null;
    if (curWaiType === 'batch') {
        const param = {
            batchId: row.batchId,
            pageNum: waitNumformData.pageNum,
            pageSize: waitNumformData.pageSize,
            supplier: userInfo.value.groupCode,
        };
        result = await batchWaitSkDetail(param);
    } else if (curWaiType === 'week') {
        const param = {
            city: userInfo.value.cityList[0].cityCode,
            pageNum: waitNumformData.pageNum,
            pageSize: waitNumformData.pageSize,
            supplier: userInfo.value.groupCode,
            weekNo: formData.weekNo,
        };
        result = await weekWaitSkDetail(param);
    }

    console.log(result);
    waitNumformData.total = result.total;
    waitData.value = result.data;

    waiNumShow.value = true;
};

const waitNumChangePage = (val) => {
    waitNumformData.pageNum = val;
    getWaiData(curRowInfo);
};
const waitNumchangePageSize = (val) => {
    waitNumformData.pageSize = val;
    getWaiData(curRowInfo);
};

const showWaitNumDialogByBatch = async (row: any) => {
    curRowInfo = row;
    curWaiType = 'batch';
    getWaiData(row);
};

const showWaitNumDialogByWeek = () => {
    curWaiType = 'week';
    getWaiData(null);
};

const downloadDetail = async () => {
    // 导出未上刊明细
    if (curWaiType === 'batch') {
        const param = {
            batchId: curRowInfo.batchId,
            supplier: userInfo.value.groupCode,
        };
        const { file } = await batchWaitSkDetailExport(param);
        exportFormBlob(file, '批次未上刊点位明细');
    } else if (curWaiType === 'week') {
        const param = {
            city: userInfo.value.cityList[0].cityCode,
            supplier: userInfo.value.groupCode,
            weekNo: formData.weekNo,
        };
        const { file } = await weekWaitSkDetailExport(param);
        exportFormBlob(file, '周期未上刊点位明细');
    }

    // try {
    //     let resp = await downloadTemplate(pageModel.query.type);
    //     if (resp.value) {
    //         window.open(resp.value);
    //     }
    // } finally {
    //     console.log('error');
    // }
};
</script>

<style lang="scss" scoped>
.wait-total {
    cursor: pointer;
    p,
    span {
        color: #4d88ff !important;
    }
}
.data_list {
    display: flex;
    height: 84px;
    border: 1px solid #ededed;
    border-radius: 4px;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    .tipTotal {
        position: absolute;
        display: inline-block;
        width: 44px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background: #e60044;
        border-radius: 4px 0 4px 0;
        top: 0;
        left: 0;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
    }
    div {
        text-align: center;
        p {
            font-weight: 600;
            font-size: 20px;
            color: #252525;
            line-height: 0.1;
        }
        span {
            font-size: 14px;
            color: #666666;
        }
    }
}

.wait-num-dialog {
    span {
        font-size: 14px;
    }
    ::v-deep .el-dialog__title {
        font-weight: 700;
    }
    ::v-deep .xc-table {
        margin-top: 0;
    }
    .export-btn {
        display: flex;
        justify-content: space-between;
        .el-button {
            margin: 20px 0 0 20px;
        }
    }
}
.wait-num {
    cursor: pointer;
    color: #4d88ff;
}
.point-red {
    color: #e60044;
}
.xc-table {
    margin-top: 20px;
}
::v-deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    display: flex;
    align-items: center;
    width: 280px;
}

::v-deep(.el-date-editor) {
    .el-input__prefix .el-input__icon {
        display: none;
    }

    .el-input__prefix-inner {
        &::before {
            content: '';
            padding-right: 15px;
            font-size: 14px;
            color: #808080;
        }
    }
    .el-input__inner {
        padding-left: 96px;
    }
}
.tabs {
    position: relative;
}
.tips-box {
    position: absolute;
    right: 10px;
    top: 0px;
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    cursor: pointer;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    .tips-icon {
        width: 14px;
        height: 14px;
        margin-left: 8px;
    }
}
.wait-num-dialog {
    background-color: pink;
}
</style>
